<script>
  import { onMount, onDestroy } from 'svelte';
  import { modalStore, closeModal } from '../stores/modal';
  import { IconClose } from '../utils/icons';

  let dialogElement;

  // Handle Escape key
  function handleKeydown(event) {
    if (event.key === 'Escape' && $modalStore.isOpen) {
      handleCancel();
    }
  }

  // Handle backdrop click
  function handleBackdropClick(event) {
    if (event.target === dialogElement && $modalStore.closeOnBackdrop) {
      handleCancel();
    }
  }

  // Handle confirm
  function handleConfirm() {
    if ($modalStore.onConfirm) {
      $modalStore.onConfirm();
    }
    closeModal();
  }

  // Handle cancel
  function handleCancel() {
    if ($modalStore.onCancel) {
      $modalStore.onCancel();
    }
    closeModal();
  }

  // Prevent body scroll when modal is open
  $: if ($modalStore.isOpen) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = '';
  }

  onMount(() => {
    document.addEventListener('keydown', handleKeydown);
  });

  onDestroy(() => {
    document.removeEventListener('keydown', handleKeydown);
    document.body.style.overflow = '';
  });
</script>

{#if $modalStore.isOpen}
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
  <div
    class="modal-backdrop"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    bind:this={dialogElement}
    on:click={handleBackdropClick}
  >
    <div class="modal-content modal-{$modalStore.size}">
      <div class="modal-header">
        <h2 id="modal-title">{$modalStore.title}</h2>
        <button
          class="modal-close"
          on:click={handleCancel}
          aria-label="Close modal"
        >
          <IconClose size={20} />
        </button>
      </div>

      <div class="modal-body">
        {#if $modalStore.content}
          <svelte:component this={$modalStore.content} {...$modalStore.props} />
        {:else}
          <slot />
        {/if}
      </div>

      <div class="modal-footer">
        {#if $modalStore.showCancel}
          <button class="btn btn-secondary" on:click={handleCancel}>
            {$modalStore.cancelText}
          </button>
        {/if}
        {#if $modalStore.showConfirm}
          <button class="btn btn-{$modalStore.confirmVariant}" on:click={handleConfirm}>
            {$modalStore.confirmText}
          </button>
        {/if}
      </div>
    </div>
  </div>
{/if}

<style>
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
  }

  .modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
  }

  .modal-small {
    width: 100%;
    max-width: 400px;
  }

  .modal-medium {
    width: 100%;
    max-width: 600px;
  }

  .modal-large {
    width: 100%;
    max-width: 900px;
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
  }

  .modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: color 0.2s;
    border-radius: 4px;
  }

  .modal-close:hover {
    color: #4b5563;
    background: #f3f4f6;
  }

  .modal-close:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
  }

  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
  }

  .btn {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
  }

  .btn-secondary {
    background: white;
    color: #374151;
    border-color: #d1d5db;
  }

  .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
  }

  .btn-primary {
    background: #3b82f6;
    color: white;
  }

  .btn-primary:hover {
    background: #2563eb;
  }

  .btn-danger {
    background: #ef4444;
    color: white;
  }

  .btn-danger:hover {
    background: #dc2626;
  }

  .btn-success {
    background: #22c55e;
    color: white;
  }

  .btn-success:hover {
    background: #16a34a;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(1rem);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @media (max-width: 640px) {
    .modal-content {
      width: 100%;
      max-width: none;
      border-radius: 8px 8px 0 0;
      max-height: calc(100vh - 1rem);
      margin-top: auto;
    }

    .modal-small,
    .modal-medium,
    .modal-large {
      width: 100%;
      max-width: none;
    }
  }
</style>
